@import "common.less";
html,body,.body{height: 100%;}

//动画
@keyframes ahovers {
  0%{
    background-position: -180px top;
    color: inherit;
  }
  100%{
    background-position: 0 top;
    color: #000;
  }
}

.home{
  height: 100%;width: 100%;background: url("../img/bg.jpg") right top no-repeat;
  .logo{position: absolute;top: 35px;left: 35px;width: 240px;height: 82px;background: url("../img/logo.png") no-repeat;z-index: 99;}
  .m-line{display: none;}

  .content-box-close{display: none;}

  .content-cover{position: absolute;top: 0;bottom: 0;width: 33.33%;;z-index: 97;transition: background 0.4s;
    &.number{background-color: rgba(4, 141, 151,0.1);}
    &.artifc{background-color: rgba(1, 120, 17,0.1);}
    &.data{background-color: rgba(111, 46, 193,0.1);}
  }
  .content{
    position: absolute;width: 33.33%;height: 100%;top: 0;display: table;z-index: 98;
    &.content-bg{background: url("../img/bg-1.jpg") no-repeat;z-index: 96;}
    &.data.content-bg{background: url("../img/bg-1.jpg") right top no-repeat;}
    &.number{color: @color-blue;left: 0;
      .menu{
        .line{background-color: @color-blue;}.con{color: fadeout(@color-blue,60%);}
      }
    }
    &.artifc{color: @color-green;left: 33.33%;
      .menu{
        .line{background-color: @color-green;}.con{color: fadeout(@color-green,60%);}
      }
      .table{
        .li-box{margin-bottom: 60px;
          .li a.hover{background: url("../img/a-hover-ai.jpg") no-repeat;}
          .xian{border-left-color: @color-green;}
        }
        .li-box-p{
          .h1-line{height: 66%;border-left-color: @color-green;top: 48px;}
          .dashed{border-top-color: @color-green;}
        }
      }
    }
    &.data{color: @color-purple;left: 66.66%;
      .menu{
        .line{background-color: @color-purple;}.con{color: fadeout(@color-purple,60%);}
      }
      .table{
        .li-box{
          .li a.hover{background: url("../img/a-hover-data.jpg") no-repeat;}
          .xian{border-left-color: @color-purple;}
        }
        .li-box-p{
          .h1-line{height: 62%;border-left-color: @color-purple;}
          .dashed{border-top-color: @color-purple;}
        }
      }
    }
    //内容
    .box{width: 100%;height: 100%;display: table-cell;vertical-align: middle;text-align: center;}
    .menu{
      .tit{font-size: 32px;margin-top: 30px;}
      .line{display: block;height: 2px;background-color: @color-blue;width: 30px;margin: 40px auto;}
      .con{font-size: 24px;color: fadeout(@color-blue,60%);}
    }
    .table{
      width: 370px;margin: 0 auto;font-size: 16px;
      &:after{content: '';clear: both;display: block;}
      .pic{height: 40px;
        img{height: 100%;}
      }
      .li-box-p{float: right;position: relative;
        .h1{position: absolute;top: 0;bottom: 0;width: 108px;left: -216px;cursor: pointer;}
        .h1-line{position: absolute;height: 54%;border-left: 1px dashed @color-blue;top: 65px;right: 0;}
        .img{position: absolute;top: 50%;height: 50px;margin-top: -25px;right: 25px;
          img{height: 100%;}
          .name{line-height: 30px;}
        }
        .dashed{position: absolute;border-top: 1px dashed @color-blue;width: 20px;top: 49.8%;
          &.L{left: 0;}
          &.R{right: 0;}
        }
      }
      .li-box{position: relative;margin-bottom: 30px;
        &:last-child{margin-bottom: 0;}
        .li{margin-top: 10px;text-align: left;padding-left: 27px;position: relative;
          &:first-child{margin-top: 0;}
          a{color: inherit;font-size: inherit;padding: 0 12px;line-height: 25px;display: block;
            &.hover{color: #000;background: url("../img/a-hover-number.jpg")  no-repeat;animation: ahovers 1s infinite linear;}
          }
        }
        .xian{position: absolute;border-left: 1px dashed @color-blue;left: 0;top: 12px;bottom: 12px;}
        .tit{position: absolute;width: 108px;top: 0;bottom: 0;left: -108px;cursor: pointer;
          .img{position: absolute;width: 100%;height: 46px;top: 50%;margin-top: -23px;left: 0;}
          .txt{position: absolute;top: 100%;width: 100%;left: 0;}
        }
      }
    }
  }

  //默认隐藏内容
  .content-cover,.content.content-bg{display: none;}
  .moreList{opacity: 0;}
}

@media  (max-width: 1200px){
  body{width: 1200px;}
}

//响应式手机端
@media  (max-width: @sreen){
  body{width: 100%;}
  .home{
    background: url("../img/m-bg.jpg") center center;background-size: 100%;
    &.momu{background: url("../img/m-bg-1.jpg") center center;background-size: 100%;}
    .logo{top: 32/@rem;left: 32/@rem;width: 274/@rem;height: 67/@rem;background: url("../img/m-home-logo.png") no-repeat;background-size: 100%;}
    .m-line{display: block;position: absolute;width: 100%;top: 122/@rem;border-top: 1px solid fadeout(@color-blue,70%);}

    .content-box-close{z-index: 100;cursor: pointer;position: fixed;width: 110/@rem;height: 110/@rem;background:url("../img/content-box-close.png") no-repeat;background-size: 100%;font-size: 100/@rem;bottom:3%;left: 50%;margin-left: -55/@rem;}
    .content-box{position: absolute;top: 0;bottom: 10%;width: 100%;margin-top: 122/@rem;box-sizing: border-box;}
    .content{
      width: 100%;height: 33.33%;
      &.screen{margin: 0 5%;width: 90%;border-top: 1px solid fadeout(@color-blue,70%);cursor: pointer;
        &:nth-child(2){border-top: none;}
      }
      &.number{left: 0;top: 0%;}
      &.artifc{left: 0;top: 33.33%;
        &.moreList{
          .table{
            .li-box{margin-bottom: 100/@rem;
            }
            .li-box-p{
              .h1-line{bottom: 125/@rem;}
            }
          }
        }
      }
      &.data{left: 0;top:66.66%;
        &.moreList{
          .table{
            .li-box-p{
              .h1-line{bottom: 175/@rem;}
            }
          }
        }
      }

      &.moreList{opacity: 1;top: 27%;display: none;
        .table{
          width: 100%;font-size: 26/@rem;
          .li-box-p{
            float: left;margin-left: 370/@rem;
            .h1{position: absolute;top: 0;bottom: 0;width: 0;left: -170/@rem;cursor: pointer;
              .dashed{display: none;}
              .img{display: none;}
            }
            .h1-line{height: auto;top: 0;bottom: 215/@rem;right: 0;}
            .dashed{width: 40/@rem;top: 49.9%;
              &.L{left: 0;}
              &.R{right: 0;}
            }
          }
          .li-box{margin-bottom: 36/@rem;
            .li{margin-top: 30/@rem;padding-left: 42/@rem;
              a{padding: 0 24/@rem;line-height: 48/@rem;}
            }
            .xian{top: 24/@rem;bottom: 24/@rem;}
            .tit{width: 170/@rem;left: -170/@rem;cursor: pointer;
              .img{height: 80/@rem;margin-top: -40/@rem;}
            }
          }
        }
      }

      //内容
      .menu{
        .pic{height: 140/@rem;}
        .m-cont{display: inline-block;margin-left: 110/@rem;text-align: left;}
        .tit{font-size: 58/@rem;margin-top: 0;}
        .line{height: 6/@rem;width: 22/@rem;margin: 10/@rem 0;}
        .con{font-size: 22/@rem;}
      }
    }
    //默认隐藏内容
    .content-cover,.content.content-bg{display: none;}
  }
}
